<template>
  <div id="app">
    <Topbar :key="topBarKeyValue"> </Topbar>
    <Header> </Header>
    <router-view @addToCartReload="reloadFn" />
    <Footer> </Footer>
    <Login v-show="isShowLogin"></Login>
    <!-- 提示框 -->
    <Toast v-show="toastShow"></Toast>
  </div>
</template>
<script>
import Topbar from "@/components/Topbar.vue";
import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";
import Login from "@/components/Login.vue";
import Toast from "@/components/Toast.vue";
// import axios from "@/request/request";

import { mapState } from "vuex";

export default {
  data() {
    return { topBarKeyValue: 0 };
  },
  methods: {
    reloadFn() {
      this.topBarKeyValue++;
    },
  },
  components: {
    Topbar,
    Footer,
    Header,
    Login,
    Toast,
  },
  computed: {
    ...mapState({
      isShowLogin: (state) => state.isShowLogin.isShowLogin,
      toastShow: (state) => state.toastShow.toastShow,
    }),
  },
  //监听路由，路由一旦发生改变，重载topbar
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.topBarKeyValue++;
        }
      },
    },
  },
  async created() {
    /* 弊端：
    1.每次发起请求，都需要输入很长一段地址 一旦地址改变了，每个地方都要改变
    2.每次发请求都要携带token
    3.会有回调地狱问题
          例如请求A完成后再请求B
    ========封装axios
    1. src/request/request.js
    2.统一接口代码位置 src/request/api.js
    // */
    // axios
    //   .get("/products/recommend")
    //   .then((res) => {
    //     console.log("请求成功", res);
    //   })
    //   .catch((err) => {})
    //=====统一接口代码位置后
    // JinpingAPI()
    //   .then((res) => {
    //     console.log(res);
    //   })
    //   .catch((err) => {});
    //=====async/awit解决回调地狱
    // let result = await JinpingAPI();
    // console.log(result);
  },
};
</script>
<style lang="less"></style>
